<template>
	<base-page>
		<view class="uni-flex uni-row height-all page-height">
			<view class="common-wrap" style="-webkit-flex: 1;flex: 1;">
				<view class="left-wrap">
					<view class="left-wrap-head">
						<view class="head-text">会员列表</view>
						<!-- <view class="head-icon" @click="memberAction('addmember')">+</view> -->
					</view>
					<view class="left-wrap-content">
						<view class="wrap-search-box">
							<view class="wrap-search">
								<input placeholder="请输入会员账号 昵称 手机号" v-model="searchMobile" @blur="searchMember()" placeholder-style="font-size:0.14rem" />
								<text class="iconfont icon31sousuo" @click="searchMember()"></text>
							</view>
						</view>
						<scroll-view @scrolltolower="getMemberList()" scroll-y="true" class="common-scrollbar content-list" v-show="!one_judge">
							<view
								class="content-item"
								:class="{ active: memberId == item.member_id }"
								v-for="(item, index) in memberList"
								:key="index"
								@click="selectMember(item.member_id)"
							>
								<view class="item-img">
									<image mode="aspectFill" v-if="item.headimg" :src="$util.img(item.headimg)" @error="headError(item)"></image>
									<image mode="aspectFill" v-else :src="$util.img(defaultImg.head)"></image>
								</view>
								<view class="item-content">
									<view class="item-title">
										<view class="item-title-text">{{ item.nickname }}</view>
										<view class="item-label">{{ item.member_level_name && item.member_level ? item.member_level_name : '非会员' }}</view>
									</view>
									<view class="item-desc">
										<view>{{ item.mobile }}</view>
										<view>
											余额：
											<text>{{ parseFloat(parseFloat(item.balance) + parseFloat(item.balance_money)).toFixed(2) }}</text>
										</view>
									</view>
								</view>
							</view>
							<view v-if="memberList.length == 0" class="empty">
								<image :src="$util.img('public/uniapp/cashier/member-empty.png')" mode="widthFix"></image>
								<view class="tips">暂无会员</view>
							</view>
						</scroll-view>
						<view class="add-member"><button type="default" class="primary-btn" @click="memberAction('addmember')">添加会员</button></view>
					</view>
				</view>
				<view class="right-wrap">
					<view class="right-wrap-head"><view class="head-text">会员详情</view></view>
					<nc-member-detail v-if="!one_judge && memberId" ref="memberDetail" :member-id="memberId"></nc-member-detail>
					<view class="empty" v-else>
						<image :src="$util.img('public/uniapp/cashier/member-empty.png')" mode="widthFix"></image>
						<view class="tips">暂无会员</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加会员 -->
		<uni-popup ref="addmemberPop">
			<view class="pop-box addmemberPop-box">
				<view class="pop-header">
					<view class="pop-header-text">添加会员</view>
					<view class="pop-header-close" @click="popClose('addmember')"><text class="iconguanbi1 iconfont"></text></view>
				</view>
				<view class="common-scrollbar pop-content">
					<view class="form-content">
						<view class="form-item">
							<view class="form-label">
								<text class="required">*</text>
								手机号：
							</view>
							<view class="form-inline search-wrap"><input type="number" class="form-input" v-model="addMemberData.mobile" placeholder="请输入会员手机号" /></view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								会员昵称：
							</view>
							<view class="form-inline search-wrap"><input type="text" class="form-input" v-model="addMemberData.nickname" placeholder="请输入会员昵称" /></view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								性别：
							</view>
							<view class="form-inline search-wrap">
								<uni-data-checkbox v-model="addMemberData.sex" selectedColor="#8558FA" :localdata="sex"></uni-data-checkbox>
							</view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								生日：
							</view>
							<view class="form-inline"><uni-datetime-picker :end="endTime" v-model="addMemberData.birthday" type="date" :clearIcon="false" /></view>
						</view>
					</view>
				</view>
				<view class="pop-bottom"><button class="primary-btn" @click="addMember">确定</button></view>
			</view>
		</uni-popup>

		<uni-popup ref="refundBalance">
			<view class="pop-box refund-balance-box">
				<view class="pop-header">
					<view class="pop-header-text">退储值</view>
					<view class="pop-header-close" @click="$refs.refundBalance.close()"><text class="iconguanbi1 iconfont"></text></view>
				</view>
				<view class="pop-content" v-if="refundData">
					<view class="info-item">
						<view class="title">账户可用储值：</view>
						<view class="data">￥{{ $util.moneyFormat(parseFloat(refundData.member_account.balance) + parseFloat(refundData.member_account.balance_money)) }}</view>
					</view>
					<view class="info-item">
						<view class="title">实充储值：</view>
						<view class="data">￥{{ refundData.refund_total_balance | moneyFormat }}</view>
					</view>
					<view class="info-item">
						<view class="title">已使用储值：</view>
						<view class="data">￥{{ refundData.use_total_balance | moneyFormat }}</view>
					</view>
					<view class="info-item">
						<view class="title">可退储值金额：</view>
						<view class="data">￥{{ refundData.can_refund_balance | moneyFormat }}</view>
					</view>
					<view class="info-item">
						<view class="title">退还金额：</view>
						<view class="data"><input type="number" value="" v-model="refundData.refund_balance" /></view>
					</view>
					<view class="info-item">
						<view class="title">退款方式：</view>
						<view class="data refund-type">
							<view
								class="value-item"
								:class="{ active: index == refundTransferType }"
								@click="refundTransferType = index"
								v-for="(item, index) in refundTransferTypeList"
								:key="index"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="pop-bottom">
					<button class="primary-btn" @click="confirmRefundBalance">确定</button>
					<button class="default-btn" @click="$refs.refundBalance.close()">取消</button>
				</view>
			</view>
		</uni-popup>
	</base-page>
</template>

<script>
import list from './public/js/list.js';
import dataTable from '@/components/uni-data-table/uni-data-table.vue';
import ncMemberDetail from '@/components/nc-member-detail/nc-member-detail.vue';

export default {
	components: { dataTable, ncMemberDetail },
	mixins: [list]
};
</script>

<style>
.pop-box >>> .td {
	line-height: 1.7;
}
.right-wrap >>> .member-head {
	display: none;
}
</style>

<style lang="scss" scoped>
@import './public/css/member.scss';
</style>
